<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱状图</title>
    <!-- 引入 Echarts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

</head>
<body>
   
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
       //1.引入echarts.js
       //2.准备一个dom
      //3.初始化echarts实例  
      //4.设置options
      var data = [
            {value: 88, name: '张三'},
            {value: 92, name: '李四'},
            {value: 63, name: '王五'},
            {value: 77, name: '闰土'},
            {value: 94, name: '小明'},
            {value: 80, name: '茅台'},
            {value: 80, name: '二妞'},
            {value: 80, name: '大强'}
        ];
    var option = {
        xAxis:{
            type:'value',
            name:'成绩',
        },
        yAxis:{
            type:'category',
            data: data.map(item => item.name),
            //横向对齐
            axisLabel:{
                interval:0,
                rotate:0
            }
            
        },
        series:[{
        data: data.map(item => item.value),
        type: 'bar',
        label:{
            show:true,
            position:'top',
            formatter:'{c}'
        },
       //调整柱子的宽度
       barWidth:'30%',
       //横向柱状图的柱子横向放置
       showBackground:false,
       showBackgroundStyle:{
        color: 'rgba(220, 220, 220, 0.8)'
       },
        markPoint:{
            data:[
                {type:'max',name:'最大值' },
                {type:'min',name:'最小值'}
                ]
        },
        markLine:{
            data:[
                { type:'average',name:'平均值'}
                ]
                }
        
        }
    ]
        

    }
    myChart.setOption(option);
    </script>
</body>
</html>